<script setup lang="ts">
  import { ref, computed, nextTick, onUnmounted } from 'vue';
  import { debDoTask } from '@/api/system-basic';
  import { debounce } from 'lodash-es';
  import { Notification } from '@arco-design/web-vue';

  const taskType = ref('');
  const wmsTaskId = ref('');
  const palletCode = ref('');
  const palletWeight = ref('');
  const heightValue = ref('');
  const startCode = ref('');
  const endCode = ref('');
  const rowNo = ref('');
  const roadway = ref('');
  const palletCodeRef = ref();

  async function handleSearch() {
    if (!palletCode.value) {
      return;
    }
    const data = await debDoTask({
      command: 5,
      taskType: taskType.value,
      wmsTaskId: wmsTaskId.value,
      palletCode: palletCode.value,
      palletWeight: palletWeight.value,
      startCode: startCode.value,
      endCode: endCode.value,
      roadway: roadway.value,
      rowNo: rowNo.value,
    });
    if (data.code === '200') {
      Notification.success({
        title: '成功',
        content: data.data,
        closable: true,
      });
    } else {
      Notification.error({
        title: '失败',
        content: data.data,
        closable: true,
      });
    }
    nextTick(() => {
      palletCodeRef.value.focus();
      palletCodeRef.value.inputRef.select();
    });
  }
  // 增加防抖避免点击多次
  const debouncedTaskGoOn = debounce(handleSearch, 500, {
    leading: true, // 立即执行
    trailing: false, // 不在延迟结束后执行
  });
  onUnmounted(() => {
    debouncedTaskGoOn.cancel(); // 清理debounce以防内存泄漏
  });
</script>

<template>
  <div class="flow-query">
    <a-card>
      <template #title>
        <div class="card-title">立体库集成</div>
      </template>
      <div>
        <a-button type="primary" size="large" @click="debouncedTaskGoOn">
          启动入库
        </a-button>
      </div>
      <div class="content">
        <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
          <a-col :span="6">
            <div>
              <a-select
                v-model="taskType"
                placeholder="任务类型"
                size="large"
                allow-clear
              >
                <a-option value="1">入库</a-option>
                <a-option value="2">出库</a-option>
                <a-option value="3">移库</a-option>
              </a-select>
            </div>
          </a-col>
          <a-col :span="6">
            <div>
              <a-input
                v-model="wmsTaskId"
                placeholder="任务ID"
                size="large"
                allow-clear
              />
            </div>
          </a-col>
          <a-col :span="6">
            <div>
              <a-input
                ref="palletCodeRef"
                v-model="palletCode"
                placeholder="托盘编码"
                size="large"
                allow-clear
              />
            </div>
          </a-col>
          <a-col :span="6">
            <div>
              <a-input
                v-model="palletWeight"
                placeholder="物料重量"
                size="large"
                allow-clear
              />
            </div>
          </a-col>
        </a-row>

        <a-row class="margin-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
          <a-col :span="6">
            <div>
              <a-input
                v-model="heightValue"
                placeholder="物料高度"
                size="large"
                allow-clear
              />
            </div>
          </a-col>
          <a-col :span="6">
            <div>
              <a-input
                v-model="startCode"
                placeholder="开始位置"
                size="large"
                allow-clear
              />
            </div>
          </a-col>
          <a-col :span="6">
            <div>
              <a-input
                v-model="endCode"
                placeholder="结束位置"
                size="large"
                allow-clear
              />
            </div>
          </a-col>
          <a-col :span="6">
            <div>
              <a-input
                v-model="rowNo"
                placeholder="货位分组序号"
                size="large"
                allow-clear
              />
            </div>
          </a-col>
        </a-row>
        <a-row class="margin-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
          <a-col :span="6">
            <div>
              <a-input
                v-model="roadway"
                placeholder="巷道"
                size="large"
                allow-clear
              />
            </div>
          </a-col>
        </a-row>
      </div>
    </a-card>
  </div>
</template>

<style scoped>
  .content {
    margin-top: 10px;
  }
  .margin-top {
    margin-top: 10px;
  }
</style>
